<template>
  <view class="online-body">
    <view class="house-repair">
      <view class="title">
        报修房屋
      </view>
      <view class="pd-bgc">
        <view class="cell-info" @click="show1=true">
          <view class="left">
            <view v-if="!roomname" class="lable  lable-b">
              请选择房屋信息
            </view>
            <view v-else class="room-txt">
              {{roomname}}
            </view>
          </view>
          <view class="right">
            <image src="../../static/icon/right.png" mode="widthFix" style="width: 24px;"></image>
          </view>
        </view>
      </view>
      <!-- 选择报修的房屋 -->
      <view>
        <u-action-sheet @select="selectitem" description="选择报修房屋" :actions="list" :show="show1" @close="show1=false"
          cancelText="取消">
        </u-action-sheet>
      </view>

      <view class="title">
        报修信息
      </view>
      <!-- 左边内边距 -->
      <view class="pd-bgc">
        <view class="userinfo">
          <!-- 维修项目 -->
          <view class="cell-info" @click="show2=true">
            <view class="left">
              <view class="lable">
                维修项目
              </view>
              <view class="text">
                <view v-if="!productname" class="palcehold">
                  请选择
                </view>
                <view v-else class="txt-conent">
                  {{productname}}
                </view>
              </view>
            </view>
            <view class="right">
              <image src="../../static/icon/right.png" mode="widthFix" style="width: 24px;"></image>
            </view>
          </view>
          <view>
            <u-action-sheet @select="selectproduct" description="选择维修项目" :actions="list1" :show="show2"
              @close="show2=false" cancelText="取消">
            </u-action-sheet>
          </view>
          <!-- 预留手机号 -->
          <u--form labelPosition="left" ref="form" borderBottom :model="userform" :rules="rules">

            <u-form-item prop="mobile" borderBottom ref="item1" labelWidth="104" label="手机号">
              <u--input v-model="userform.mobile" border="none" placeholder="请输入手机号"
                placeholderStyle="font-size: 28rpx;color:#c3c3c5">
              </u--input>
            </u-form-item>
          </u--form>
          <!-- 选择日期 -->
          <view class="cell-info" @click="show3=true">
            <view class="left">
              <view class="lable">
                选择日期
              </view>
              <view class="text">
                <view v-if="!userform.appointment" class="palcehold">
                  请选择上门日期
                </view>
                <view v-else class="txt-conent">
                  {{userform.appointment}}
                </view>
              </view>
            </view>
            <view class="right">
              <image src="../../static/icon/right.png" mode="widthFix" style="width: 24px;"></image>
            </view>
          </view>
          <view>
            <u-datetime-picker title="选择上门日期" ref="datetimePicker" @confirm="getDataTime" @cancel="show3=false"
              :show="show3" v-model="valuetime" mode="date" :formatter="formatter">
            </u-datetime-picker>
          </view>

        </view>
        <!-- 文本区域 -->
        <view class="textarea-form">
          <view class="textarea-title">问题描述</view>
          <view class="textarea-content">
            <u--textarea v-model="userform.description" placeholder="请填写详细报修内容，有助于工作人员快速帮您解决问题。" border="none">
            </u--textarea>
          </view>
        </view>
        <!-- 问题附件 -->
        <view class="upload-files">
          <view class="title-txt">
            问题附件
          </view>
          <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @progress="progress"
            @success="success" @fail="fail"></uni-file-picker>
        </view>

      </view>
      <view class="sub-btn">
        <life-button @click="submitbtn" icon="../../static/icon/repair.png">提交报修</life-button>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    getHouseItem,
    getRepairItem,
    addHouseRepair
  } from "../../api/repair.js"
  export default {
    data() {
      return {
        // roomname房屋名字
        roomname: '',
        // productname  维修选项名字
        productname: '',
        show1: false,
        show2: false,
        show3: false,
        list: [{
          name: '采荷东区西区1号楼101',
          houseId: "6851939165589504"
        }],
        list1: [],
        valuetime: Number(new Date()),
        // 用户手机号
        userform: {
          houseId: '',
          mobile: '18900000000',
          // 维修项目id
          repairItemId: '',
          // 选择日期
          appointment: '',
          // 描述信息
          description: '',
          attachment: [{
            id: '',
            url: ''
          }]
        },
        // 图片信息列表
        imageValue: [],
        // 校验规则
        rules: {
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              pattern: /^((\+|00)86)?1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/,
              message: '手机号码格式不正确',
              trigger: ['change', 'blur'],
            }
          ]
        }
      }
    },
    onReady() {
      // 微信小程序需要用此写法
      this.$refs.datetimePicker.setFormatter(this.formatter)
      this.$refs.form.setRules(this.rules);
    },
    onLoad() {
      //  获取报修的房屋和维修选项
      this.getHouseItemList()
    },
    methods: {
      async getHouseItemList() {
        const res = await getHouseItem()
        const res2 = await getRepairItem()
        this.list1 = res2.data
        console.log(res, res2);
      },

      // 点击获取列表项
      selectitem(value) {
        console.log(value.houseId);
        this.roomname = value.name
        this.userform.houseId = value.houseId
      },
      selectproduct(value) {
        console.log(value);
        this.productname = value.name
        this.userform.repairItemId = value.id
      },


      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        }
        if (type === 'month') {
          return `${value}月`
        }
        if (type === 'day') {
          return `${value}日`
        }
        return value
      },
      // 时间转换
      getDataTime({
        value
      }) {

        function add0(m) {
          return m < 10 ? '0' + m : m
        }

        function format(shijianchuo) {
          //shijianchuo是整数，否则要parseInt转换
          var time = new Date(shijianchuo);
          var y = time.getFullYear();
          var m = time.getMonth() + 1;
          var d = time.getDate();
          return y + '-' + add0(m) + '-' + add0(d);
        }
        console.log(format(value));
        this.userform.appointment = format(value)
        this.show3 = false
      },
      // 上传图片
      // 获取上传状态
      select(e) {
        console.log('选择文件：', e)
        this.userform.attachment[0].id = String(e.tempFiles[0].uuid)
        this.userform.attachment[0].url = e.tempFiles[0].url
      },
      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },
      // 上传成功
      success(e) {
        console.log('上传成功', e)
      },
      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      },
      // 提交
      submitbtn() {
        this.$refs.form.validateField('mobile', async (errRes) => {
          // if (this.userform.repairItemId) return
          if (errRes.length) return
          // if (this.userform.appointment) return
          console.log('提交');
          const res = await addHouseRepair(this.userform)
          console.log(res);
        })
      }

    },
  }
</script>

<style lang="scss" scoped>
  .online-body {
    background: #fafafa;
    padding-bottom: 150px;

    .house-repair {
      .title {
        padding-left: 30rpx;
        height: 86rpx;
        color: #979797;
        font-family: PingFang SC;
        font-weight: regular;
        font-size: 24rpx;
        line-height: 86rpx;
        text-align: left;
      }

      .userinfo {
        background-color: #fff;
      }
    }
  }

  ::v-deep .u-cell__body {
    background-color: #fff;
    height: 102rpx;

    .u-cell__title-text {
      position: relative;
      left: -30rpx;
    }
  }

  .pd-bgc {
    background-color: #fff;
    padding-left: 30rpx;
  }

  ::v-deep .u-form {
    .u-form-item {
      .u-form-item__body {
        height: 103rpx;
        padding: 0;
      }

      .u-count-down__text {
        font-size: 28rpx;
        color: #5591AF;
      }
    }
  }

  .cell-info {
    height: 102rpx;
    padding-right: 30rpx;
    border-bottom: 1px #eaebec solid;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      width: 300px;

      .lable {
        flex: 1;

      }

      .lable-b {
        font-size: 14px;
        color: #c3c4c5;
      }

      .room-txt {
        font-size: 14px;
        color: #333;
      }

      .text {
        flex: 2;

        .palcehold {
          font-size: 14px;
          color: #c3c4c5;
          position: relative;
          right: -5px;
        }

        .txt-conent {
          font-size: 14px;
          color: #333;
          position: relative;
          right: -6px;
        }

      }

    }
  }

  .textarea-form {
    padding-top: 30rpx;
    border-bottom: #eaebec 1px solid;

    .textarea-title {
      color: #333333;
      font-family: PingFang SC;
      font-weight: regular;
      font-size: 28rpx;
      line-height: 42rpx;
      letter-spacing: 0rpx;
      text-align: left;
      margin-bottom: 30rpx;
    }
  }

  .upload-files {
    padding: 30rpx 0;
    box-sizing: border-box;

    .title-txt {
      color: #333333;
      font-family: PingFang SC;
      font-weight: regular;
      font-size: 28rpx;
      line-height: 42rpx;
      letter-spacing: 0rpx;
      text-align: left;
      margin-bottom: 20rpx;
    }

    .upload-img {
      display: flex;
      justify-content: start;
      align-items: center;

      .add-img {
        border-radius: 6rpx;
        background: #FFFFFF;
        border: 2rpx solid #F2F2F6;
        height: 154rpx;
        width: 154rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  ::v-deep .file-picker__box {
    width: 154rpx !important;
    height: 154rpx !important;
    padding-top: 0 !important;

    .icon-del-box {
      height: 12px;
      width: 12px;

      .icon-del {
        width: 10px;
      }
    }
  }

  ::v-deep .u-action-sheet__description.data-v-b62b882e {
    color: #333333;
    font-family: PingFang SC;
    font-weight: medium;
    font-size: 32rpx;
    line-height: 22rpx;
    letter-spacing: 0rpx;
    text-align: center;

  }

  ::v-deep .u-textarea.data-v-09988a29 {
    padding: 0;
  }
</style>
